import { useRootStore } from '../stores/rootStore'
import { observer } from 'mobx-react-lite'
import apple  from '../images/apple.png'
function Content(){
  const { todoListStore } =useRootStore()

  return (
    <div>
        {
          todoListStore.todos.map((item,index)=>{ 
          return <div className="appleItem" key={index} style={{display:(!item.eat)?'flex':'none'}}>
                  <div className="apple">
                    <img src={apple} />
                  </div>
                  <div className="info">
                    <div className="name">红苹果 -{index+1}号</div>
                    <div className="weight">{item.gram}克</div>
                  </div>
                <div className="btn-div">
                  <button onClick={() =>{todoListStore.eat(index)}} > 吃掉 </button>
                </div>
              </div>
          })
        }
    </div>
  
   
  )
}
export default observer(Content)